<template>
    <div class="shopcart">
        <div class="content" @click="toggleList">
            <div class="content-left">
                <!-- 购物车logo -->
                <div class="logo-wrapper">
                    <div class="logo" :class="{'highlight':totalCount>0}">
                        <i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
                    </div>
                    <!-- 显示商品数量 -->
                    <div v-show="totalCount>0" class="num" :class="{'highlight':totalCount>0}">{{totalCount}}</div>
                </div>
                <!-- 价格 -->
                <div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
                <!-- 配送费 -->
                <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
            </div>
            <div class="content-right">
                <!-- 右侧结算按钮 -->
                <div class="pay" :class="payClass" @click.stop.prevent="pay">
                    {{payDesc}}
                </div>
            </div>
        </div>
        <!-- 购物车动画的小球  -->
      	<div class="ball-container">
        	<div v-for="(ball, index) in balls" :key="index">
          		<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
          		  <div class="ball" v-show="ball.show">
             		 <div class="inner inner-hook"></div>
           		  </div>
          		</transition>
        	</div>
        </div>
        <!-- 购物车列表 -->
        <transition name="fold">
          <div class="shopcart-list" v-show="listShow">
            <div class="list-header">
              <h1 class="title">购物车</h1>
              <span class="empty">清空</span>
            </div>
            <div class="list-content" ref="listContent">
              <ul>
                <li class="food" v-for="(food,index) in selectFoods" :key="index">
                  <span class="name">{{food.name}}</span>
                  <div class="price">
                    <span>￥{{food.count*food.price}}</span>  
                  </div>
                  <div class="cartcontrol-wrapper">
                    <cartcontrol :food='food' @click="addFood"></cartcontrol>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </transition>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import cartcontrol from '../cartcontrol/cartcontrol'
export default {
  props: {
    //   选中的商品,来计算价格
    selectFoods: {
      type: Array,
      default() {
        return []
      }
    },
    // 配送费
    deliveryPrice: {
      type: Number,
      default: 0
    },
    // 起送费
    minPrice: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      balls: [
        // 要执行动画时的显示的小球
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: [], // 执行过后的小球
      fold: true,
    }
  },
  computed: {
    // 总价
    totalPrice() {
      let total = 0
      this.selectFoods.forEach(food => {
        total += food.price * food.count
      })
      return total
    },
    // 总数
    totalCount() {
      let count = 0
      this.selectFoods.forEach(food => {
        count += food.count
      })
      return count
    },
    //  用一个计算属性代替各种状态
    payDesc() {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`
      } else if (this.totalPrice < this.minPrice) {
        let diff = this.minPrice - this.totalPrice
        return `还差￥${diff}元起送`
      } else {
        return '去结算'
      }
    },
    // 根据金额是否大于起送费来切换类
    payClass() {
      if (this.totalPrice >= this.minPrice) {
        return 'enough'
      } else {
        return 'not-enough'
      }
    },
    // 列表显示
    listShow(){
      // 如果数量为0就隐藏为真,显示为假
      if(!this.totalCount){
        this.fold=true
        return false
      }
      let show=!this.fold
      if(show){
        this.$nextTick(()=>{
          if(!this.scroll){
           this.scroll=new BScroll(this.$refs.listContent,{
             click: true
            })
          }else{
            this.scroll.refresh() //list-content不断变化,调用刷新接口
          }
        })
      }
      return show
    }
  },
  methods: {
    pay(){
      if(this.totalPrice<this.minPrice){
        return
      }
      alert(`成功支付${this.totalPrice}元`)
    },
    toggleList(){
      if(!this.totalCount){
        return 
      }
      this.fold=!this.fold
    },
    addFood(target) {
        this.drop(target);
    },
    drop(el) {
      console.log(el)
      // 找到所有隐藏的小球设置成true
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el // 存入当前的dom元素，以便动画函数里面使用
          this.dropBalls.push(ball)
          return
        }
      }
    },
    beforeDrop(el) {
      let count = this.balls.length // 拿到所有要做动画的小球
      while (count--) {
        let ball = this.balls[count]
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect() // 浏览器的接口，返回的是一个矩形的四个值
          let x = rect.left - 32 // 减去设定的小球的位置
          // 窗体的高度减去当前按钮的高度在减去设定的小球的高度
          let y = -(window.innerHeight - rect.top - 22)
          el.style.display = '' // 显示小球
          el.style.webkitTransform = `translate3d(0,${y}px,0)`
          el.style.transform = `translate3d(0,${y}px,0)`
          let inner = el.getElementsByClassName('inner-hook')[0]
          inner.style.webktiTransform = `transform3d(${x}px,0,0)`
          inner.style.transform = `translate3d(${x}px,0,0)`
        }
      }
    },
    dropping(el, done) {
      // enter 和leave中必须使用done，否则动画过渡会立即完成，就是要告诉vue什么时候动画结束了的意思
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight // 触发浏览器重绘，才能隐藏动画过后的小球
      this.$nextTick(() => {
        el.style.webkitTransform = 'translate3d(0,0,0)'
        el.style.transform = 'translate3d(0,0,0)'
        let inner = el.getElementsByClassName('inner-hook')[0]
        inner.style.webktiTransform = 'translate3d(0,0,0)'
        inner.style.transform = 'translate3d(0,0,0)'
        el.addEventListener('transitionend', done) // transitionend css3 提供事件，监听transition的结束
      })
    },
    afterDrop(el) {
      let ball = this.dropBalls.shift() // 移除动画结束之后的小球
      if (ball) {
        ball.show = false // 重置小球的状态
        el.style.display = 'none'
      }
    }
  },
  components: {
    cartcontrol
  }
}
</script>

<style lang="stylus">
.shopcart // 购物车外层
	position fixed
	left 0
	bottom 0
	z-index 50
	width 100%
	height 48px
	.content // 购物车内层
		display flex
		background #141d27
		color rgb(255, 255, 255, 0.4)
		.content-left // 购物车左边自适应区域
			flex 1
			.logo-wrapper // 购物车图标外层
				display inline-block
				position relative
				top -10px
				margin 0 12px
				padding 6px
				width 56px
				height 56px
				box-sizing border-box
				vertical-align top
				border-radius 50%
				background #141d27
				.logo // 购物车logo
					width 100%
					height 100%
					border-radius 50%
					text-align center
					background #2b343c
					&.highlight
						background rgb(0, 160, 220)
					.icon-shopping_cart
						font-size 24px
						line-height 44px
						color #80858a
						&.highlight
							color #fff
				.num
					position absolute
					top 0
					right 0
					width 24px
					height 16px
					line-height 16px
					text-align center
					border-radius 16px
					font-size 9px
					font-weight 700
					color #fff
					background rgb(240, 20, 20)
					box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.4)
			.price
				display inline-block
				vertical-align top
				margin-top 12px
				line-height 24px
				padding-right 12px
				box-sizing border-box
				border-right 1px solid rgba(255, 255, 255, 0.1)
				font-size 16px
				font-weight 700
				&.highlight
					color #fff
			.desc
				display inline-block
				vertical-align top
				margin 12px 0 0 12px
				line-height 24px
				font-size 10px
		.content-right
			flex 0 0 105px
			width 105px
			.pay
				height 48px
				line-height 48px
				text-align center
				font-size 12px
				font-weight 700
				color #fff
				background #23333b
				&.not-enough
					background #23333b
				&.enough
					background #00b43c
					color #fff
	// .ball-container // 动画小球的层  //TODO: ball的样式
    //   .ball // 小球的动画的最终位置
    //     position: fixed
    //     left: 32px
    //     bottom: 22px
    //     z-index: 200
    //     transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)// 小球的动画使用贝塞尔曲线
    //     .inner
    //       width: 16px
    //       height: 16px
    //       border-radius: 50%
    //       background: rgb(0, 160, 220)
    //       transition: all 0.4s linear
	.shopcart-list
		position absolute
		left 0
		top 0
		z-index -1
		width 100%
		transform translate3d(0,-100%,0)
		&.fold-enter-active,&.fold-leave-active
			transition all 0.5s
		&.fold-enter,&.fold-leave-active
			transform translate3d(0,0,0)
		.list-header
			height 40px
			line-height 40px
			padding 0 18px
			background #f3f5f7
			border-bottom 1px solid rgba(7,17,27,0.1)
			.title
				float left
				font-size 14px
				color rgb(7,17,27)
			.empty
				float right
				font-size 12px
				color rgb(0,160,220)
		.list-content
			padding 0 18px
			max-height 217px
			overflow hidden
			background #fff
			.food
				position relative		
				padding 12px 0
				box-sizing border-box
				// border-1px(rgba(7,17,27,0.1))
				border-bottom 1px solid rgba(7,17,27,0.1)
				.name
					line-height 24px
					font-size 14px
					color rgb(7,17,27)
				.price
					position absolute
					right 90px
					bottom 12px
					line-height 24px
					font-size 14px
					font-weight 700
					color: rgb(240, 20, 20)
				.cartcontrol-wrapper
					position absolute
					right 0
					bottom 6px
</style>